/*
 
 */
 
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0; }

/* @font-face */ 

@font-face {
  font-family: "Angeline_Vintage";
  src: url("../../Fonts/Angeline_Vintage.ttf"); }
@font-face {
  font-family: "Montserrat-Bold";
  src: url("../../Fonts/Montserrat-Bold.ttf"); }
@font-face {
  font-family: "Roboto-Regular";
  src: url("../../Fonts/Roboto-Regular.ttf"); }
@font-face {
  font-family: "Roboto-Italic";
  src: url("../../Fonts/Roboto-Italic.ttf"); }
@font-face {
  font-family: "Valdemar";
  src: url("../../Fonts/Valdemar.ttf"); }
@font-face {
  font-family: "Annabel1";
  src: url("../../Fonts/Annabel1.TTF"); }
@font-face {
  font-family: "CALIFB";
  src: url("../../Fonts/CALIFB.TTF"); }
body {
  margin: 0 auto;
  font-family: "Roboto-Regular";
  line-height: 1.4em;
  background-image: url("../personal images/Library Background 01.png");
  background-size: cover;
  color: #f0f0f0;
}

.header-container {
  text-align: center; /* centers inline-block elements */
  margin-top: 2rem;   /* optional spacing from top */
}

header {
  display: inline-block; /* shrink to fit content */
  padding: 1rem 2rem;     /* optional spacing */
  text-align: center;
  margin: 2rem;
  background: rgba(10, 57, 238, 0.19); /* translucent blue */
  backdrop-filter: blur(0.3rem);
  -webkit-backdrop-filter: blur(0.3rem);
  border-radius: 1.5625rem; /* 25px */
  box-shadow:
    -0.625rem 0.625rem 0.3125rem #000000, /* -10px 10px 5px */
    -0.625rem 0.625rem 0.3125rem #000000,
    0 0.1875rem 0.125rem #000000,
    0 0.25rem 0.125rem #000000,
    0 0.3125rem 0.125rem #000000,
    0 0.375rem 0.125rem #000000,
    0 0.4375rem 0.125rem #000000,
    0 0.5rem 0.125rem #000000,
    0 0.5625rem 0.125rem #000000,
    0 0.625rem 0.125rem #000000,
    0 0.6875rem 0.125rem #000000,
    0 0.75rem 0.125rem #000000,
    -0.625rem 1.25rem 1.875rem #7878F6;
  border: 0.125rem solid rgba(255, 255, 255, 0.2); /* frosted edge */
  color: #c0c0c0;
  position: relative;
  overflow: hidden;
    position: sticky;
  top: 1rem;
  z-index: 100;
}

header.aside {
            margin-left: 1.5625rem;
			margin-right: 1.5625rem;
			margin-bottom: 1.5625rem;
            border-radius: 1.5625rem;
			box-shadow: -0 0.0625rem 0 #000000, -0 0.125rem 0 #000000,
                0 0.1875rem 0.125rem #000000, 0 0.25rem 0.125rem #000000,
                0 0.3125rem 0.125rem #000000, 0 0.375rem 0.125rem #000000,
                0 0.4375rem 0.125rem #000000, 0 0.5rem 0.125rem #000000,
                0 0.5625rem 0.125rem #000000, 0 0.625rem 0.125rem #000000,
                0 0.6875rem 0.125rem #000000, 0 0.75rem 0.125rem #000000,
                -0 1.25rem 1.875rem #7878F6;
}
         
h2 {
			color: #67b7f7;
			font-family: "Montserrat-Bold";
            font-size: 2.1875rem;
			-webkit-text-fill-color: #67b7f7;
			-webkit-text-stroke-width: 0.0312rem;
			-webkit-text-stroke-color: mediumblue;
            text-shadow: 0 0.0625rem 0 mediumblue, 0 0.125rem 0 #67b7f7,
                0 0.1875rem 0 #000000, 0 0.25rem 0 #000000,
                0 0.3125rem 0 #000000, 0 0.375rem 0 #000000,
                0 0.4375rem 0 #000000, 0 0.5rem 0 #000000,
                0 0.5625rem 0 #000000, 0 0.625rem 0 #000000,
                0 0.6875rem 0 #000000, 0 0.75rem 0 #000000,
                0 1.25rem 1.875rem #67b7f7;
        }

		
 h1.logo {
  font-family: "Valdemar";
  color: #67b7f7;
  font-size: clamp(2.5rem, 5vw, 4rem);
  -webkit-text-fill-color: mediumblue;
  -webkit-text-stroke-width: 0.0156rem;
  -webkit-text-stroke-color: mediumblue;
  text-shadow: 0 0.0312rem 0 #67b7f7, 0 0.125rem 0 #67b7f7,
  0 0.1875rem 0 #000000, 0 0.25rem 0 #000000,
  0 0.3125rem 0 #000000, 0 0.375rem 0 #000000,
  0 0.4375rem 0 #000000, 0 0.5rem 0 #000000,
  0 0.5625rem 0 #000000, 0 0.625rem 0 #000000,
  0 0.6875rem 0 #000000, 0 0.75rem 0 #000000,
  0 1.25rem 1.875rem mediumblue;
}

nav a {
  color: #c0c0c0;
  margin: 0 1rem;
  text-decoration: none;
}

main {
  padding: 2rem;
}

section {
  margin-bottom: 3rem;
}

section.tree {
  background-image: url("../personal images/Landing Page Background 01.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  margin-bottom: 3rem;
}

a {
			color: #FFFF00;
			text-decoration: none;}
html {
  font-size: 1rem;
}

.layout {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
}
.card-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2-column layout */
  gap: 2rem;
  max-width: 1000px;
  margin: 0 auto;
    justify-content: center; /* or flex-start/space-between */
  overflow: hidden;
}

.content-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* Force 2 columns by default */
  gap: 2rem;
  margin: 2rem 0;
  flex: 2;
  min-width: 20rem;
}

.card {
  display: block;
  width: auto; /* Let the grid handle sizing */
  overflow: hidden;
  max-width: 100%;
    
}

@media (max-width: 768px) {
  aside {
    width: 100%;
    float: none;
    margin: 1rem 0;
  }

  .card-container {
    grid-template-columns: 1fr; /* Stack cards vertically */
    align-items: center;
  }
}

.card, aside {
  background: rgba(10, 57, 238, 0.19); /* translucent blue */
  backdrop-filter: blur(0.3rem);
  -webkit-backdrop-filter: blur(0.3rem);
  border-radius: 1.5625rem; /* 25px */
  padding: 1.875rem; /* 30px */
  box-shadow:
    -0.625rem 0.625rem 0.3125rem #000000, /* -10px 10px 5px */
    -0.625rem 0.625rem 0.3125rem #000000,
    0 0.1875rem 0.125rem #000000,
    0 0.25rem 0.125rem #000000,
    0 0.3125rem 0.125rem #000000,
    0 0.375rem 0.125rem #000000,
    0 0.4375rem 0.125rem #000000,
    0 0.5rem 0.125rem #000000,
    0 0.5625rem 0.125rem #000000,
    0 0.625rem 0.125rem #000000,
    0 0.6875rem 0.125rem #000000,
    0 0.75rem 0.125rem #000000,
    -0.625rem 1.25rem 1.875rem #7878F6;
  border: 0.125rem solid rgba(255, 255, 255, 0.2); /* frosted edge */
  color: white;
  position: relative;
  overflow: hidden;
    transition: all 0.3s ease-in-out;
}

.card:hover {
  transform: scale(1.02);
  transition: transform 0.3s ease;
  box-shadow:
    -0.75rem 0.75rem 0.375rem #000000,
    0 0.3125rem 0.25rem #000000,
    -0.625rem 1.5625rem 2.1875rem #7878F6;
}

        table {
			height: auto;
            width: 22.875em;
            empty-cells: hide;
}
		td {
			font-size: 80%;
			line-height: 1.8em;
			width: 7.625em;
			border-bottom: 0.0625rem solid #5D5D5D;}
		td.blank {
			visibility: hidden;}

table td i {
  margin-right: 6px;
  color: #67b7f7;
}

table a:hover i {
  color: #A3C5E0;
}

.card h3 a {
  color: #de0000;
  text-decoration: none;
}

.card p {
  color: #ccc;
}
		
aside {
      flex: 1;
      min-width: 18rem;
      max-width: 25rem;
      width: 25rem;
			height: auto;
			float: right;
			margin: 0 0 0.625rem 1.875rem;
            margin-right: 1.5625rem;
			}
        img {
            padding: 0.0625rem;
            }
        img.aside {
            margin-left: 1.5625rem;
			margin-right: 1.5625rem;
			margin-bottom: 1.5625rem;
            border-radius: 1.5625rem;
			box-shadow: -0 0.0625rem 0 #000000, -0 0.125rem 0 #000000,
                0 0.1875rem 0.125rem #000000, 0 0.25rem 0.125rem #000000,
                0 0.3125rem 0.125rem #000000, 0 0.375rem 0.125rem #000000,
                0 0.4375rem 0.125rem #000000, 0 0.5rem 0.125rem #000000,
                0 0.5625rem 0.125rem #000000, 0 0.625rem 0.125rem #000000,
                0 0.6875rem 0.125rem #000000, 0 0.75rem 0.125rem #000000,
                -0 1.25rem 1.875rem #7878F6;
}
         img.right:hover {
            transform: scale(1.05);
            }
        img.left:hover {
            transform: scale(1.05);
            }
        img.aside:hover {
            transform: scale(1.05);
            }

        img.right {
            margin-left: 1.5625rem;
			margin-right: 1.5625rem;
			margin-bottom: 1.5625rem;
            border-radius: 1.5625rem;
			box-shadow: 0.625rem 0.625rem 0.3125rem #000000, 0.625rem 0.625rem 0.3125rem #000000,
                0 0.1875rem 0.125rem #000000, 0 0.25rem 0.125rem #000000,
                0 0.3125rem 0.125rem #000000, 0 0.375rem 0.125rem #000000,
                0 0.4375rem 0.125rem #000000, 0 0.5rem 0.125rem #000000,
                0 0.5625rem 0.125rem #000000, 0 0.625rem 0.125rem #000000,
                0 0.6875rem 0.125rem #000000, 0 0.75rem 0.125rem #000000,
                0.625rem 1.25rem 1.875rem #7878F6;
}
        img.left {
            margin-left: 1.5625rem;
			margin-right: 1.5625rem;
			margin-bottom: 1.5625rem;
            border-radius: 1.5625rem;
			box-shadow: -0.625rem 0.625rem 0.3125rem #000000, -0.625rem 0.625rem 0.3125rem #000000,
                0 0.1875rem 0.125rem #000000, 0 0.25rem 0.125rem #000000,
                0 0.3125rem 0.125rem #000000, 0 0.375rem 0.125rem #000000,
                0 0.4375rem 0.125rem #000000, 0 0.5rem 0.125rem #000000,
                0 0.5625rem 0.125rem #000000, 0 0.625rem 0.125rem #000000,
                0 0.6875rem 0.125rem #000000, 0 0.75rem 0.125rem #000000,
                -0.625rem 1.25rem 1.875rem #7878F6;
}
video.aside {
            margin-left: 1.5625rem;
			margin-right: 1.5625rem;
			margin-bottom: 1.5625rem;
            padding: 0.0625rem;
            border-radius: 1.5625rem;
			box-shadow: -0 0.0625rem 0 #000000, -0 0.125rem 0 #000000,
                0 0.1875rem 0.125rem #000000, 0 0.25rem 0.125rem #000000,
                0 0.3125rem 0.125rem #000000, 0 0.375rem 0.125rem #000000,
                0 0.4375rem 0.125rem #000000, 0 0.5rem 0.125rem #000000,
                0 0.5625rem 0.125rem #000000, 0 0.625rem 0.125rem #000000,
                0 0.6875rem 0.125rem #000000, 0 0.75rem 0.125rem #000000,
                -0 1.25rem 1.875rem #7878F6;
}
        video.right {
            margin-left: 1.5625rem;
			margin-right: 1.5625rem;
			margin-bottom: 1.5625rem;
            padding: 0.0625rem;
            border-radius: 1.5625rem;
			box-shadow: 0.625rem 0.625rem 0.3125rem #000000, 0.625rem 0.625rem 0.3125rem #000000,
                0 0.1875rem 0.125rem #000000, 0 0.25rem 0.125rem #000000,
                0 0.3125rem 0.125rem #000000, 0 0.375rem 0.125rem #000000,
                0 0.4375rem 0.125rem #000000, 0 0.5rem 0.125rem #000000,
                0 0.5625rem 0.125rem #000000, 0 0.625rem 0.125rem #000000,
                0 0.6875rem 0.125rem #000000, 0 0.75rem 0.125rem #000000,
                0.625rem 1.25rem 1.875rem #7878F6;
}
        video.left {
            margin-left: 1.5625rem;
			margin-right: 1.5625rem;
			margin-bottom: 1.5625rem;
            padding: 0.0625rem;
            border-radius: 1.5625rem;
			box-shadow: -0.625rem 0.625rem 0.3125rem #000000, -0.625rem 0.625rem 0.3125rem #000000,
                0 0.1875rem 0.125rem #000000, 0 0.25rem 0.125rem #000000,
                0 0.3125rem 0.125rem #000000, 0 0.375rem 0.125rem #000000,
                0 0.4375rem 0.125rem #000000, 0 0.5rem 0.125rem #000000,
                0 0.5625rem 0.125rem #000000, 0 0.625rem 0.125rem #000000,
                0 0.6875rem 0.125rem #000000, 0 0.75rem 0.125rem #000000,
                -0.625rem 1.25rem 1.875rem #7878F6;
}
:root {
  --accent: #67b7f7;
  --frost-bg: rgba(10, 57, 238, 0.19);
  --text-light: #f0f0f0;
}

@keyframes glow {
  25% {
    border-top: 0.125rem solid var(--color-jelles);
    border-right: 0.125rem solid blue;
    border-bottom: 0.125rem solid #7878F6;
    border-left: 0.125rem solid blue;
  }
    50% {
    border-top: 0.125rem solid #7878F6;
    border-right: 0.125rem solid var(--color-jelles);
    border-bottom: 0.125rem solid blue;
    border-left: 0.125rem solid #7878F6;
  }
  75% {
    border-top: 0.125rem solid blue;
    border-right: 0.125rem solid #7878F6;
    border-bottom: 0.125rem solid var(--color-jelles);
    border-left: 0.125rem solid blue;
  }
  100% {
    border-top: 0.125rem solid #7878F6;
    border-right: 0.125rem solid blue;
    border-bottom: 0.125rem solid #7878F6;
    border-left: 0.125rem solid var(--color-jelles);
  }
}

.article-list article {
  border: 0.0625rem solid #444;
  padding: 1rem;
  margin-bottom: 1rem;
  border-radius: 0.5rem;
}

.social-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12.5rem, 1fr));
  gap: 1rem;
}

ul {
  list-style: disc;
  padding-left: 1.25rem;
}

ol {
  list-style: disc;
  margin-left: 1.25rem;
}

ul, li [class$="-bullets"] {
  list-style-type: none;
  margin-left: 1.25rem;
}

ul[class$="-bullets"] li::before {
  font-size: 1.2em;
  margin-right: 0.5em;
  margin-left: 1.25rem;
  display: inline-block;
  width: 1em;
}

ul.captain-bullets li::before {
  content: "✪";
  color: #00d4ff; /* Neon Blue */
}

ul.star-bullets li::before {
  content: "✧";
  color: #ffe600; /* Bright Star Yellow */
}

ul.gear-bullets li::before {
  content: "⚙️";
  color: #a0a0a0; /* Steel Gray */
}

ul.lightning-bullets li::before {
  content: "⚡";
  color: #ffd700; /* Lightning Gold */
}

ul.comet-bullets li::before {
  content: "☄";
  color: #ff6ec7; /* Plasma Pink */
}

ul.hexagon-bullets li::before {
  content: "⬢";
  color: #00bfff; /* Sci-fi Cyan */
}

ul.chemical-bullets li::before {
  content: "⌬";
  color: #cc00ff; /* Molecular Violet */
}

ul.satellite-bullets li::before {
  content: "🛰️";
  color: #ffffff; /* White Satellite Signal */
}

ul.dna-bullets li::before {
  content: "🧬";
  color: #99ccff; /* Biotech Light Blue */
}

ul.pulse-bullets li::before {
  content: "⌁";
  color: #ff4d4d; /* Pulse Red */
}

ul.navigation-bullets li::before {
  content: "⎈";
  color: #00ffcc; /* Teal Navigation */
}

ul.galaxy-bullets li::before {
  content: "🌌";
  color: #a020f0; /* Galaxy Purple */
}

ul.alchemical-bullets li::before {
  content: "🜁";
  color: #9966cc; /* Arcane Purple */
}

ul.arcane-bullets li::before {
  content: "⛬";
  color: #00ffff; /* Light Arcane Blue */
}

ul.ward-bullets li::before {
  content: "🧿";
  color: #0077b6; /* Deep Protective Blue */
}

ul.flame-bullets li::before {
  content: "🔥";
  color: #ff4500; /* Fiery Orange */
}

ul.elven-bullets li::before {
  content: "❧";
  color: #32cd32; /* Elven Green */
}

ul.swords-bullets li::before {
  content: "⚔️";
  color: #c0c0c0; /* Sword Steel */
}

ul.shield-bullets li::before {
  content: "🛡️";
  color: #4682b4; /* Heroic Blue */
}

ul.crystalball-bullets li::before {
  content: "🔮";
  color: #800080; /* Mystic Violet */
}

ul.candle-bullets li::before {
  content: "🕯️";
  color: #f5deb3; /* Waxen Gold */
}

ul.key-bullets li::before {
  content: "🗝️";
  color: #d4af37; /* Ancient Gold */
}

ul.clock-bullets li::before {
  content: "🧭";
  color: #b8860b; /* Timeworn Bronze */
}

ul.star-trek-bullets li::before {
  content: "➤";
  transform: rotate(-90deg);
  display: inline-block;
  font-size: 1.2em;
  margin-right: 0.5em;
  color: #b8860b; /* Timeworn Bronze */
}

ul.hebrew-sign li::before {
  content: "ײ";
  font-size: 1.2em;
  margin-right: 0.5em;
}

ul.templar-cross-bullets li::before {
  content: "✠";
  font-size: 1.2em;
  margin-right: 0.5em;
}

ul.sparkles-bullets li::before {
  content: "✨";
  color: #ffd700; /* Waxen Gold */
}

ul.castle-bullets li::before {
  content: "🏰";
  color: #e5e5ea; /* Ancient Gold */
}

ul.broken-heart-bullets li::before {
  content: "💔";
  color: #8B0A1A; /* Waxen Gold */
}

ul.calendar-bullets li::before {
  content: "📆";
  color: #FFFFFF; /* Ancient Gold */
}

ul.open-square-bullets li::before {
  content: "□";
  color: #C7C5B8; /* Waxen Gold */
}

ul.checkmark-bullets li::before {
  content: "✓";
  color: #34C759; /* Ancient Gold */
}

ul.horse-bullets li::before {
  content: "🐴"; /* (WHITE CHESS KNIGHT) */
  color: #C19A6B;
}

ul.book-bullets li::before {
  content: "📖"; /* (OPEN BOOK) */
  color: #8B4513;
}

ul.king-bullets li::before {
  content: "♔"; /* (WHITE CHESS KING) */
  color: gold;
}

ul.queen-bullets li::before {
  content: "♕"; /* (WHITE CHESS QUEEN) */
  color: gold;
}

ul.sun-bullets li::before {
  content: "☀️";
  color: gold;
}

ul.moon-bullets li::before {
  content: "🌗"; /* (LAST QUARTER MOON) */
  color: gold;
}

sup {
			font-size: 50%;}


.footer {
  clear: both;
  position: relative;
  text-align: center;
  right: 0;
    bottom: 0;
    left: 0;
    padding: 1rem;
  background-image: url("../personal images/cool-hd-wallpapers-for-iphone.jpg");
  background-size: cover;
  color: #888;
}
.footer p {
	font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
	font-size: 100%;
	text-align: center;}
.footer a{
	color: #FFFF00;}
/*# sourceMappingURL=style.css.map */